<template>
  <div>
    <Row :gutter="10">
      <i-col span="6">
        <Card>
          <div class="i18n-card-box">
            <DatePicker type="date" placeholder="Select date"></DatePicker>
            <TimePicker
              type="timerange"
              placement="bottom-end"
              placeholder="Select time"
              style="display: block; margin-top: 10px"
            ></TimePicker>
            <Button
              type="primary"
              @click="modalVisible = true"
              style="margin-top: 10px"
              >{{ $t("buttonText") }}
            </Button>
            <Modal v-model="modalVisible" :title="$t('modalTitle')">
              <p>{{ content }}</p>
              <p>{{ content }}</p>
              <p>{{ content }}</p>
            </Modal>
            <i class="tip">{{ $t("i18n-tip") }}</i>
          </div>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "i18n_page",
  data() {
    return {
      modalVisible: false,
    };
  },
  computed: {
    content() {
      return this.$t("content");
    },
  },
};
</script>

<style lang="less">
.i18n-card-box {
  height: 200px;
  .tip {
    color: gray;
    display: block;
    margin-top: 20px;
  }
}
</style>